<template>
  <el-aside width="100%" class="side-menu">
    <el-card class="card" header="我的常用">
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div>DCM 钻完井管理系统</div>
          <div class="card-extra" @click="getCurrentView">自定义</div>
        </div>
      </template>
      <component :is="currentView" />
    </el-card>
    <el-card class="card" header="IADM 钻完井作业智能分析及动态管理系统" style="margin-top: 10px">
      <template #header>
        <div style="display: flex; justify-content: space-between; align-items: center">
          <div>作业进度基本信息表</div>
          <div class="card-extra" @click="getJobProgressView">自定义</div>
        </div>
      </template>

      <component :is="currentJobProgressView" />
    </el-card>
    <el-card class="card" header="测试系统（待确定）" style="margin-top: 16px">
      <div class="card-extra">自定义</div>
    </el-card>
    <el-dialog v-model="dialogVisible" title="选择模块" width="500">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in moduleOptions" :key="index">
          <div class="module-item" :class="{ 'is-active': selectedModule === item.component }" @click="selectModule(item)">
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.name }}</span>
          </div>
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmSelection">确定</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog v-model="jobProgressDialogVisible" title="选择模块" width="500">
      <el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in jobProgressOptions" :key="index">
          <div class="module-item" :class="{ 'is-active': selectedJobProgressModule === item.component }" @click="selectJobProgressModule(item)">
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.name }}</span>
          </div>
        </el-col>
      </el-row>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="jobProgressDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="confirmJobProgressSelection">确定</el-button>
        </div>
      </template>
    </el-dialog>
  </el-aside>
</template>

<script lang="ts" setup>
  import AssessmentIndicators from '@/components/SideMenu/AssessmentIndicators.vue'
  import ProductionCapacity from '@/components/SideMenu/ProductionCapacity.vue'
  import EquivalentDrillingCycle from '@/components/SideMenu/EquivalentDrillingCycle.vue'
  import RiceCost from '@/components/SideMenu/RiceCost.vue'
  import JobProgress from '@/components/SideMenu/JobProgress.vue'
  import { ref } from 'vue'
  import { DataLine, Histogram, TrendCharts, Monitor } from '@element-plus/icons-vue'

  interface ModuleOption {
    name: string
    icon: string
    component: keyof typeof componentViewInfo
  }

  interface JobProgressOption {
    name: string
    icon: string
    component: keyof typeof jobProgressComponentInfo
  }

  let componentViewInfo = {
    assessmentIndicators: AssessmentIndicators,
    productionCapacity: ProductionCapacity,
    equivalentDrillingCycle: EquivalentDrillingCycle,
  } as const

  const moduleOptions: ModuleOption[] = [
    { name: '考核指标', icon: 'DataLine', component: 'assessmentIndicators' },
    { name: '产量建设', icon: 'Histogram', component: 'productionCapacity' },
    { name: '2500m当量钻井周期', icon: 'TrendCharts', component: 'equivalentDrillingCycle' },
    // { name: '系统监控', icon: 'Monitor', component: '2' },
  ]

  // const currentView = ref(componentViewInfo.assessmentIndicators)
  const currentView = ref(componentViewInfo[localStorage.getItem('currentView') as keyof typeof componentViewInfo] || componentViewInfo.assessmentIndicators)
  const dialogVisible = ref(false)
  const selectedModule = ref<keyof typeof componentViewInfo | ''>((localStorage.getItem('currentView') as keyof typeof componentViewInfo) || 'assessmentIndicators')

  const getCurrentView = () => {
    dialogVisible.value = true
  }

  const selectModule = (module: ModuleOption) => {
    selectedModule.value = module.component
  }

  const confirmSelection = () => {
    console.log(selectedModule.value)

    if (selectedModule.value && componentViewInfo[selectedModule.value]) {
      currentView.value = componentViewInfo[selectedModule.value]
    }
    dialogVisible.value = false
    localStorage.setItem('currentView', selectedModule.value)
  }

  const jobProgressComponentInfo = {
    riceCost: RiceCost,
    jobProgress: JobProgress,
  } as const

  const jobProgressOptions: JobProgressOption[] = [
    { name: '成本分析', icon: 'DataLine', component: 'riceCost' },
    { name: '作业进度', icon: 'Histogram', component: 'jobProgress' },
  ]

  const currentJobProgressView = ref(jobProgressComponentInfo[localStorage.getItem('currentJobProgressView') as keyof typeof jobProgressComponentInfo] || jobProgressComponentInfo.riceCost)
  const jobProgressDialogVisible = ref(false)
  const selectedJobProgressModule = ref<keyof typeof jobProgressComponentInfo | ''>((localStorage.getItem('currentJobProgressView') as keyof typeof jobProgressComponentInfo) || 'riceCost')

  const getJobProgressView = () => {
    jobProgressDialogVisible.value = true
  }

  const selectJobProgressModule = (module: JobProgressOption) => {
    selectedJobProgressModule.value = module.component
  }

  const confirmJobProgressSelection = () => {
    if (selectedJobProgressModule.value && jobProgressComponentInfo[selectedJobProgressModule.value]) {
      currentJobProgressView.value = jobProgressComponentInfo[selectedJobProgressModule.value]
    }
    jobProgressDialogVisible.value = false
    localStorage.setItem('currentJobProgressView', selectedJobProgressModule.value)
  }
</script>

<style lang="scss" scoped>
  .side-menu {
    background: transparent;
    padding: 10px 0 0 0;

    .card {
      margin-bottom: 8px;

      .card-item {
        margin-bottom: 6px;
        font-size: 14px;
      }
      .card-extra {
        text-align: right;
        color: #409eff;
        cursor: pointer;
        font-size: 13px;
      }
    }
  }

  .module-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 80px;
    background-color: #f5f7fa;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 16px;
    border: 2px solid transparent;

    &:hover {
      background-color: #ecf5ff;
      color: #409eff;
    }

    &.is-active {
      background-color: #ecf5ff;
      color: #409eff;
      border-color: #409eff;
      font-weight: 500;
    }

    .el-icon {
      font-size: 24px;
      margin-bottom: 8px;
    }

    span {
      font-size: 14px;
    }
  }
</style>
